<template>
  <div class="hello">
    <div class="active" :style="this.activecheck==1?' left: 0;':'left:50%'"></div>
     <div>
       <ul class="nav">
          <li @click="active(1)">自营</li>
        <li  @click="active(2)">贝式严选</li>
       </ul>
     </div>
<router-view>

</router-view>
     
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '',
      activecheck:1,
      nsList:[]
    }
  },
  mounted(){
   

   
  },
  methods:{
   
    active(item){
     if(item===1){
       this.$router.push( '/classify/ziying')
       this.activecheck=1

     }else{
        this.$router.push( '/classify/beishi')
         this.activecheck=2
     }
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .nav{
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: r(50);
    border-bottom: r(1) solid #ccc;
    li{
      line-height: r(50);
      font-size: r(16);
      width: 50%;
      text-align: center;
    }

  }
  .active{
      border-bottom: r(2) solid #1db0b8;
      width: 50%;
      position: absolute;
    
      top: r(50);
      transition: all 0.5s;
  }
</style>


